<html>
<head>
    <title>双预防系统</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        body {
            background: #F0F2F6;
        }

        .page-main {
            margin-bottom: 0px;
        }

        .main-head {
            background: #fff;
            margin-bottom: 0px;
        }

        .chart-outer {
            height: 200px;
        }

        .inputW {
            width: 150px;
        }

        .itemW {
            width: 200px;
        }

        .formLabelWidth {
            width: 100px;
        }

        .el-tabs--border-card > .el-tabs__content {
            padding: 0px;
        }
    </style>
</head>
<body>
<div class="page" id="page-monitor">
    <div class="page-title">隐患排查台账>风险统计
        <el-button @click="exportData" type="primary" style="float: right">导出风险统计</el-button>
    </div>
    <div class="page-main">

        <el-tabs type="border-card">
            <el-tab-pane label="风险点统计">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="风险点名称">
                            <el-input placeholder="请输入" class="inputW" v-model="riskName"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker v-model="month" type="month" placeholder="选择月" style="width: 120px;">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="tableData" height="660" :stripe="true" :border="true" size="mini" style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="riskName" label="风险点名称"></el-table-column>
                    <el-table-column prop="total" label="任务总数"></el-table-column>
                    <el-table-column prop="finished" label="任务完成数"></el-table-column>
                    <el-table-column prop="found" label="发现隐患数"></el-table-column>
                    <el-table-column prop="processed" label="已处理隐患数"></el-table-column>
                    <el-table-column prop="unprocessed_timeout" label="超期未处理数"></el-table-column>
                </el-table>
                <div class="">
                    <el-pagination background layout="prev, pager, next" :pagesize="pagesize" :total="totalCount"
                                   :current-page.sync="pageno" @current-change="onChangePage">
                    </el-pagination>
                </div>
            </el-tab-pane>

            <el-tab-pane label="人员统计">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="人员名称">
                            <el-input placeholder="请输入" class="inputW" v-model="user.userName"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker v-model="month" type="month" placeholder="选择月" style="width: 120px;">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="userData" height="660" :stripe="true" :border="true" size="mini" style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center">
                    </el-table-column>
                    <el-table-column prop="userName" label="人员名称">
                    </el-table-column>
                    <el-table-column prop="total" label="任务总数"></el-table-column>
                    <el-table-column prop="finished" label="任务完成数"></el-table-column>
                    <el-table-column prop="found" label="发现隐患数"></el-table-column>
                    <el-table-column prop="processed" label="已处理隐患数"></el-table-column>
                    <el-table-column prop="unprocessed_timeout" label="超期未处理数"></el-table-column>

                </el-table>
                <div class="">
                    <el-pagination background layout="prev, pager, next" :pagesize="user.pagesize"
                                   :total="user.totalCount"
                                   :current-page.sync="user.pageno" @current-change="UserChangePage">
                    </el-pagination>
                </div>
            </el-tab-pane>

            <el-tab-pane label="部门统计">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="部门名称">
                            <el-input placeholder="请输入" class="inputW" v-model="depart.DepartmentName"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker v-model="month" type="month" placeholder="选择月" style="width: 120px;">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="departData" height="660" :stripe="true" :border="true" size="mini" style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center">
                    </el-table-column>
                    <el-table-column prop="DepartmentName" label="部门名称">
                    </el-table-column>
                    <el-table-column prop="total" label="任务总数"></el-table-column>
                    <el-table-column prop="finished" label="任务完成数"></el-table-column>
                    <el-table-column prop="found" label="发现隐患数"></el-table-column>
                    <el-table-column prop="processed" label="已处理隐患数"></el-table-column>
                    <el-table-column prop="unprocessed_timeout" label="超期未处理数"></el-table-column>

                </el-table>
                <div class="">
                    <el-pagination background layout="prev, pager, next" :pagesize="depart.pagesize"
                                   :total="depart.totalCount"
                                   :current-page.sync="depart.pageno" @current-change="DepartChangePage">
                    </el-pagination>
                </div>
            </el-tab-pane>


            <el-tab-pane label="区域统计">
                <div class="main-head">
                    <el-form :inline="true" size="small">
                        <el-form-item label="区域名称">
                            <el-input placeholder="请输入" class="inputW" v-model="zone.zone_name"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-date-picker v-model="month" type="month" placeholder="选择月" style="width: 120px;">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="search">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <el-table :data="zoneData" height="660" :stripe="true" :border="true" size="mini" style="width: 100%">
                    <el-table-column type="index" label="序号" width="50" align="center">
                    </el-table-column>
                    <el-table-column prop="zone_name" label="区域名称">
                    </el-table-column>
                    <el-table-column prop="total" label="任务总数"></el-table-column>
                    <el-table-column prop="finished" label="任务完成数"></el-table-column>
                    <el-table-column prop="found" label="发现隐患数"></el-table-column>
                    <el-table-column prop="processed" label="已处理隐患数"></el-table-column>
                    <el-table-column prop="unprocessed_timeout" label="超期未处理数"></el-table-column>
                </el-table>
                <div class="">
                    <el-pagination background layout="prev, pager, next" :pagesize="zone.pagesize"
                                   :total="zone.totalCount"
                                   :current-page.sync="zone.pageno" @current-change="ZoneChangePage">
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>
    var vuePage = new Vue({
        el: '#page-monitor',
        data: {
            month: '',
            currentPage: 1,
            tableData: [],
            pagesize: 10,
            pageno: 1,
            totalCount: 0,
            tableData: [],
            departData: [],
            zoneData: [],
            projectNo: '',
            riskName: '',
            editMod: false,
            userData: [],
            user: {
                wf_tasktime: '',
                pageno: 1,
                pagesize: 10,
                totalCount: 0,
                userName: '',
            },
            zone: {
                wf_tasktime: '',
                pageno: 1,
                pagesize: 10,
                totalCount: 0,
                zone_name: '',
            },
            depart: {
                wf_tasktime: '',
                pageno: 1,
                pagesize: 10,
                totalCount: 0,
                DepartmentName: '',
            },
        },
        created: function () {
            this.month = TimeUtil.convertToString(new Date()).substr(0, 7);
            this.loadData();
            this.getuserData();
            this.getDepartMent();
            this.getZoneData();
        },
        methods: {
            editClick(row) {
                this.param = row;
                this.dialogFormVisible = true;
                this.editMod = true;
            },
            exportData() {
                HttpUtil.get('Risk/StatisticsExport', {userId: SiteConfig.account.id}).success((res) => {
                    this.$message.success('导出成功');
                    window.location = SiteConfig.webApiset + res.data;
                })
            },
            p(s) {
                return s < 10 ? '0' + s : s
            },
            ToDate() {
                const d = new Date(this.month);
                const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate());
                const resTime = this.p(d.getHours()) + ':' + this.p(d.getMinutes()) + ':' + this.p(d.getSeconds());
                return resDate;
            },
            loadData: function () {
                var param = {};
                if (this.riskName)
                    param.riskName = this.riskName;
                param.wf_tasktime = this.ToDate();
                param.pageno = this.pageno;
                param.pagesize = this.pagesize;
                param.projectNo = SiteConfig.account.projectNo;
                HttpUtil.get('Patrolexcute/getRiskPercent', param).success((res) => {
                    vuePage.tableData = res.data;
                    vuePage.totalCount = res.total;
                });
            },
            onChangePage(page) {
                this.pageno = page;
                this.loadData();
            },
            DepartChangePage(page) {
                this.depart.pageno = page;
                this.getDepartMent()
            },
            ZoneChangePage(page) {

                this.zone.pageno = page;
                this.getZoneData()
            },
            UserChangePage(page) {

                this.user.pageno = page;
                this.getuserData();
            },
            search: function () {
                this.loadData();
                this.getuserData();
                this.getDepartMent();
                this.getZoneData();
            },
            getuserData: function () {
                this.user.wf_tasktime = this.ToDate();
                HttpUtil.get('Risk/riskSummaryByUser', this.user).success((res) => {
                    this.userData = res.data;
                    this.user.totalCount = res.total;
                })
            },
            getDepartMent: function () {
                this.depart.wf_tasktime = this.ToDate();
                HttpUtil.get('Patrolexcute/getRiskPercentByDepart', this.depart).success((res) => {
                    this.departData = res.data;
                    this.depart.totalCount = res.total;
                })
            },
            getZoneData: function () {
                this.zone.wf_tasktime = this.ToDate();
                HttpUtil.get('Patrolexcute/getRiskPercentByZone', this.zone).success((res) => {
                    this.zoneData = res.data;
                    this.zone.totalCount = res.total;
                })
            }
        },

        mounted: function () {

        }
    });
</script>
</body>
</html>
